<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>如何使用easyui</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
		<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" />
		<script>
			$(function(){
			 	 	
				var zTreeObj,
					setting = {
						view: {
							selectedMulti: false
						},
						callback:{
							onClick:function(e, treeId, treeNode){
							var content="<div style='width:100%;height:100%;overflow:hidden;'><iframe  scrolling='auto'  style='height: 100%;width: 100%;' src='"+treeNode.page+"'></iframe></div>"
							//如果路径存在或者不为空
							if(treeNode.page!=undefined&&treeNode.page!=""){
								//如果选项卡已经存在
								if($("#mytabs").tabs('exists',treeNode.name)){
									//选中即可
									$("#mytabs").tabs('select',treeNode.name)
								}else{
									$("#mytabs").tabs('add',{
										//
										title:treeNode.name,
										content:content
									});
								}
								}
							
							}
						}
						
						
					},
					zTreeNodes = [{
						"name": "网站导航",
						open: true,
						children: [{
							"name": "google",
							"page": "http://g.cn",
							"target": "_blank"
						}, {
							"name": "baidu",
							"page": "http://baidu.com",
							"target": "_blank"
						}, {
							"name": "sina",
							"page": "http://www.sina.com.cn",
							"target": "_blank"
						}]
					}];

			
				 $.fn.zTree.init($("#tree"), setting, zTreeNodes);
				
				$("#mytabs").tabs({
					onContextMenu:function(e,title,index){
						e.preventDefault();
						$("#mm").menu('show',{
							left:e.pageX,
							top:e.pageY
						});
					}
				});
				
				$("#closeCorrent").click(function(){
					var tab = $('#mytabs').tabs('getSelected');  
					var index = $('#mytabs').tabs('getTabIndex',tab);
					alert(index);
					$('#mytabs').tabs('close',index);
				});
				$("#closeOthers").click(function(){
					var tab = $('#mytabs').tabs('getSelected');  
					var index = $('#mytabs').tabs('getTabIndex',tab);  

					var tabs=$("#mytabs").tabs('tabs');
					var length1=tabs.length;
					for(var i=0;i<length1;i++){
						//关闭左边窗口
						if(i<index){
							$('#mytabs').tabs('close',0);
						}else{
							//关闭右边窗口
							$('#mytabs').tabs('close',1);
						}
					
					}	
				});
				
				$("#closeAll").click(function(){
					var tabs=$("#mytabs").tabs('tabs');
					var length1=tabs.length;
					for(var i=0;i<=length1;i++){
						$("#mytabs").tabs("close",0);
					}
				});
			});
		
	
		</script>
	</head>

	<body class="easyui-layout">

		<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>

		<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>

		<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>

		<div data-options="region:'west',title:'West',split:true" style="width:180px;">
			<div id="aa" class="easyui-accordion" data-options="fit:true">
				
				<div title="Title1">
					<ul id="tree" class="ztree" ></ul>
				</div>
				<div title="Title2">content2</div>
			</div>
		</div>

		<div data-options="region:'center',title:'center title'">
			<div id="mytabs" class="easyui-tabs" data-options="fit:true">
				<div title="Title1">content1</div>
				<div title="Title2">content2</div>
			</div>

		</div>
		<div  id="mm" class="easyui-menu" style="width:120px;">
			<div id="closeCorrent">关闭当前窗口</div>
			<div id="closeOthers">关闭其他窗口</div>
			<div class="menu-sep"></div> 
			<div id="closeAll" data-options="iconCls:'icon-cancel'">关闭所有窗口</div>
		</div>
	</body>

</html>